import React, { memo, useEffect, useState } from "react";

import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getTopList } from "../../store/actionType";

import HotRecommendT from "@/components/recommendTitle";
import TopRanking from "@/components/topRanking";

import { TopListWrap } from "./style";

export default memo(function TopList() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getTopList());
  }, [dispatch]);

  const { topLists } = useSelector(
    (state) => ({
      topLists: state.getIn(["recommend", "topLists"]),
    }),
    shallowEqual
  );
  return (
    <div>
      <TopListWrap>
        <HotRecommendT copywriter="榜单" />
        <div className="recommend-top-bg">
          {topLists.slice(0, 3).map((item, index) => {
            return <TopRanking topLists={item} key={item.coverImgUrl} />;
          })}
        </div>
      </TopListWrap>
    </div>
  );
});
